/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:21
* @LastEditors: Yejing
* @LastEditTime: 2023-06-10 10:31:21
* @Description: desc
*/
<template>
	<view class="myNews-page">

		<!-- 头部 -->
		<c-navigation-bar :title="publicJS.MessageTypeEnum[messageDetails.source]" :navType='search.navType'
			:navPlaceholder='search.navPlaceholder' :navThmen='search.navThmen'>
		</c-navigation-bar>

		<view class="container-box" v-if="!publicJS.tryGet(()=>this.messageDetails.info.activityId)">
			<view class="title">
				{{publicJS.jsonEn(messageDetails.title)}}
			</view>
			<view class="sender-date">
				<text class="sender">{{$t('user.sender')}}：{{$t(`myNews.sender.${messageDetails.creator}`)}}</text>
				<text class="date">
					{{publicJS.timeZoneSwitching(messageDetails.createTime,"DD/MM/YYYY")}}
				</text>
			</view>
			<view class="parse" style="word-wrap: break-word;
word-break: normal;    overflow: auto;
    height: 68vh;">
				<!-- {{messageDetails.content}} -->
				<u-parse :html="publicJS.jsonEn(messageDetails.content)"></u-parse>
			</view>
		</view>
		<view class="active-content" v-else>
			<view class="active-main">
				<image class="title" src="@/static/images/active/title.png" mode=""></image>
				<view class="activity-introduction">
					<view class="title">
						<text>{{$t('myNews.introduce')}}</text>
					</view>
					<view class="introduction">
						{{$t('myNews.introduction')}}
					</view>
				</view>
				<view class="activity-product">
					<view class="title">
						<text>{{$t('myNews.product')}}</text>
						<image src="@/static/images/active/gold.png" mode=""
							style="width: 97rpx;height: 65rpx;margin-left: 	24rpx;">
						</image>
					</view>
					<view class="activity-product-list">
						<activyProduct v-for="(item,index) in this.activeInfo.seckillGoodsAppVOS" :key="item.id + index"
							:data="item">
						</activyProduct>
					</view>
					<view class="snap-up-btn" @click="immediatelyBuy">
						{{$t('myNews.snapUp')}}
					</view>
				</view>
				<view class="activity-rules">
					<view class="title">
						<text>{{$t('myNews.rules')}}</text>
					</view>
					<view class="activity-rules-main">
						<view class="time">
							<h2>{{$t('myNews.activeTime')}}</h2>
							<text>{{activeInfo.startTime}} - {{activeInfo.endTime}}</text>
						</view>
						<view class="rule">
							<h2>{{$t('myNews.rules')}}</h2>
							<text>{{$t('myNews.ruleText[0]')}}
								{{$t('myNews.ruleText[1]')}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="center-bg" style="height: 326rpx;width:100%;"></view>
			<view class="envelope">
				<text class="inventory">{{$t('myNews.noGoods')}}</text>
				<view class="inventory-count">
					<text>{{this.activeInfo.count || 100000}}</text>
					<text>{{$t('myNews.jian')}}</text>
				</view>
				<button class="envelope-btn">{{$t('myNews.zhek')}} <text>50</text>%</button>
			</view>
		</view>


	</view>
</template>

<script>
	import moment from 'moment'
	import activyProduct from './components/activy-product.vue'
	export default {
		components: {
			activyProduct
		},
		data() {
			return {
				type: '',
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: ''
				},
				content: "",
				// 消息详情
				messageDetails: {},
				activeInfo: {},
			}
		},
		computed: {
			goodList() {
				const data = this.publicJS.tryGet(() => this.activeInfo.seckillGoodsAppVOS[0])
				return [data, data, data, data, data, data]
			}
		},
		onLoad(option) {
			this.getMessageDetailsAjax(option.id)
		},
		methods: {
			getMessageDetailsAjax(id) {
				this.$u.get('/app/openSysMessage/getSysMessage/' + id).then(res => {
					console.log(res.data)
					this.messageDetails = res.data
					this.messageDetails.content = JSON.parse(res.data.content).data
					try {
						// 保存 一些其他的信息
						this.messageDetails.info = JSON.parse(this.messageDetails.content)
						this.publicJS.tryGet(() => this.messageDetails.info.activityId) && this.getActiveInfoAjax()
					} catch (e) {
						console.log(e);
					}
				})
			},
			// 获取活动信息
			getActiveInfoAjax() {
				this.$u.get('/app/seckillActivity/getSeckillInfo/' + this.messageDetails.info.activityId).then(res => {
					const data = res.data
					console.log(data);
					console.log(data.startTime + 0);
					const sTime = parseInt(data.startTime)
					const eTime = parseInt(data.endTime)
					this.activeInfo = {
						...data,
						startTime: moment(sTime).format('YYYY年M月D日'),
						endTime: moment(eTime).format('YYYY年M月D日'),
					}
					console.log(this.activeInfo);
				})
			},
			// 立即抢购
			immediatelyBuy() {
				// this,$u.route('')
			},
		}
	}
</script>

<style lang="scss">
	@mixin center() {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.myNews-page {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.container-box {
			flex: 1;

			.title {
				font-size: 52rpx;
				color: #333;
				line-height: 84rpx;
				word-wrap: break-word;
				word-break: normal;
			}

			.sender-date {
				color: #999999;
				line-height: 44rpx;
				margin-bottom: 20rpx;

				.date {
					padding-left: 10rpx;
				}
			}
		}

		// 活动
		.active-content {
			flex: 1;
			overflow: auto;
			position: relative;
			background-color: #130782;

			.active-main {
				width: 750rpx;
				height: 2884rpx;
				background-image: url('@/static/images/active/active-bg.png');
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				position: relative;
				z-index: 100;
				padding: 0 34rpx;
				padding-top: 734rpx;

				>.title {
					width: 462rpx;
					height: 190rpx;
					@include center;
					top: 100rpx;
				}

				.activity-introduction {
					.title {
						font-size: 44rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

					.introduction {
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 40rpx;
					}
				}

				.activity-product {
					margin-top: 90rpx;

					.title {
						font-size: 44rpx;
						font-weight: 400;
						color: #FFFFFF;
						display: flex;
						align-items: center;
					}

					.activity-product-list {
						min-height: 748rpx;
						margin-top: 48rpx;
						display: grid;
						grid-template-columns: repeat(3, 1fr);

						.activy-product-item {
							margin-bottom: 40rpx;

							&:nth-child(3n+1),
							&:first-child {
								justify-self: start;
							}

							&:nth-child(3n-1) {
								justify-self: center;
							}

							&:nth-child(3n) {
								justify-self: end;
							}

						}
					}

					.snap-up-btn {
						width: 570rpx;
						height: 96rpx;
						background-image: url('@/static/images/active/buy-btn.png');
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center;
						margin: 0 auto;
						margin-top: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-bottom: 20rpx;
						font-size: 35rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}

				.activity-rules {
					margin-top: 110rpx;

					.title {
						font-size: 44rpx;
						font-weight: 400;
						color: #FFFFFF;
						display: flex;
						align-items: center;
					}

					.activity-rules-main {
						padding: 60rpx 30rpx;
						margin-top: 36rpx;
						background-image: url('@/static/images/active/active-des.png');
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center;
						width: 100%;
						min-height: 460rpx;
						color: #fff;

						h2 {
							font-size: 30rpx;
							font-weight: 400;
							line-height: 50rpx;
						}

						text {
							line-height: 50rpx;
							font-size: 24rpx;
						}
					}
				}
			}

			.center-bg {
				position: absolute;
				top: 520rpx;
				z-index: 80;
				left: 50%;
				transform: translateX(-50%);
				background-image: url('@/static/images/active/center-bg.png');
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
			}

			.envelope {
				width: 436rpx;
				height: 387rpx;
				@include center;
				top: 315rpx;
				z-index: 81;
				background-image: url('@/static/images/active/envelope.png');
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				padding-top: 108rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.inventory {
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
				}

				.inventory-count {
					font-weight: bold;
					background: linear-gradient(0deg, #FE1925 0%, #FF7F13 48.7548828125%, #E72B29 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

					>text:first-child {
						font-size: 66.67rpx;
						font-family: Source Han Sans CN;
						margin-right: 4rpx;
					}
				}

				.envelope-btn {
					margin-top: 70rpx;
					min-width: 322rpx;
					height: 53rpx;
					background: linear-gradient(0deg, #FEE15E, #FF780E);
					box-shadow: -1rpx 5rpx 18rpx 0rpx rgba(190, 0, 14, 0.82);
					border-radius: 26rpx;
					color: #FFFFFF;
					padding: 0;
					line-height: normal;
					font-size: 26rpx;
					>text {
						font-size: 40rpx;
						padding: 0 4rpx;
					}
				}
			}

		}

		.messageBox {
			margin: 34rpx 0;
			height: 172rpx;
			display: flex;
			border-bottom: 2px solid #E8E6EA;

			.iconBox {
				margin: 0 40rpx;
				height: 60rpx;
				width: 60rpx;
				background-color: #2934D0;
				display: flex;
				border-radius: 50%;
				justify-content: center;
				align-items: center;
			}

			.message {
				flex: 1;

				.messageType {
					height: 40rpx;
					font-size: 34rpx;
					font-family: SFUIDisplay-Regular, SFUIDisplay;
					font-weight: 400;
					color: #0A1F44;
					line-height: 40rpx;
				}

				.messageTime {
					height: 24rpx;
					font-size: 20rpx;
					font-family: SFUIDisplay-Regular, SFUIDisplay;
					font-weight: 400;
					color: #999CAD;
					margin: 12rpx 0;
					line-height: 24rpx;
				}

				.message {
					height: 56rpx;
					font-size: 24rpx;
					font-family: SFUIDisplay-Regular, SFUIDisplay;
					font-weight: 400;
					color: #0A1F44;
					line-height: 28rpx;
				}
			}
		}





	}
</style>